<!-- 全局组件示例 -->
<!-- 该组件通过全局注册后，可在应用的任何地方直接使用，无需单独导入 -->
<script setup>
// 全局组件的逻辑部分
// 由于使用 <script setup> 语法糖，这里定义的变量和函数仅在当前组件内部可用
// 全局组件与局部组件在代码结构上类似，区别主要在于注册方式
</script>

<template>
    <!-- 组件的HTML结构 -->
    <div class="global-container">
        <!-- 组件内部标题 -->
        <h5>全局组件</h5>
    </div>
</template>

<style scoped>
/* 组件的样式定义，scoped属性确保样式仅作用于当前组件内部元素 */
.global-container {
    border: 1px solid black; /* 为容器添加黑色边框 */
    height: 50px; /* 固定容器高度为50px */
    flex: 1; /* 设置flex属性，使组件在flex布局中自动占满可用空间 */
    /* 可根据需要添加其他样式，如padding、margin等 */
    padding: 10px; /* 示例：添加内边距 */
}

/* 为标题添加样式（仅作用于当前组件内的h5元素） */
h5 {
    margin: 0; /* 去除默认外边距 */
    line-height: 30px; /* 使文字垂直居中（50px高度 - 20px上下内边距 = 30px内容区高度） */
}
</style>